import React, { Component } from 'react'
// 接口
interface IProps {
    name: string
}
interface IState {
    // color: string
    color: 'red' | 'blue' // 不仅可以指定类型，也可以指定值
}

export default class Home extends Component<IProps, IState> { // <>:泛型
    constructor(props: IProps){
        super(props);
        this.state = {
            color:'red'
        }
    }
    changeColor =()=>{
        let color = this.state.color;
        if(color === 'red'){
            this.setState({
                color: 'blue'
            })
        }else{
            this.setState({
                color: 'red'
            })
        }
    }
    render() {
        return (
            <div>
                <span style={{color: this.state.color}}>{this.props.name}</span>
                <button onClick={this.changeColor}>change color</button>
            </div>
        )
    }
}
